<template>
	<view>
		<van-tabs color="#53A4FC" @change="changeActive">
			<van-tab :title="item" v-for="(item,index) in orderType" :key="index">
				<view class="out-border-line" v-for="(item2,index2) in orderList" :key="index2">
					<view class="flex-just" v-for="(item3,index3) in item2.goodsInfoList" :key="index3">
						<van-card :desc="item3.goodsInfo.description" :title="item3.goodsInfo.name" :thumb="item3.goodsInfo.picture"
						 class="card-box">
						</van-card>
						<view class="stepper-box">
							<text class="stepper-price">￥{{item3.goodsInfo.price}}</text>
							<text class="stepper-count">x{{item3.total}}</text>
						</view>
					</view>
					<view class="bottom-box flex-column">
						<view class="bottom-text">共{{item2.total}}件物品，合计{{item2.price}}元</view>
						<view class="bottom-button-box flex-just">
							<button @click="turnDetail(item2.orderId)">查看详情</button>
							<button @click="noOPen()">确认收货</button>
						</view>
					</view>
				</view>
			</van-tab>
		</van-tabs>
	</view>
</template>

<script>
	import {
		checkOrderRecord,
		getOrderRecord
	} from '@/common/api/groceryStore/order.js'
	export default {
		data() {
			return {
				url: '/static/corporation/groceryStore/club_logo.jpg',
				orderList: [],
				copyOrderList: [],
				orderType: ['全部', '待处理', '配送中', '已完成', '已取消'],
			}
		},
		methods: {
			// 查询是否有订单记录
			checkOrderRecord: function() {
				uni.showLoading({
					title: '加载中'
				})
				checkOrderRecord(uni.getStorageSync("memberId")).then(res => {
					if (res.data.code == 200) {
						if (res.data.data) {
							this.getOrderRecord()
						} else {
							uni.hideLoading()
							uni.showToast({
								title: '您没有订单',
								icon: 'none'
							})
						}
					} else {
						uni.hideLoading()
						uni.showToast({
							title: '网络错误',
							icon: 'none'
						})
					}
				})
			},
			// 获取用户的订单记录
			getOrderRecord: function() {
				var that = this
				getOrderRecord(uni.getStorageSync("memberId"), {
					pageNum: 1,
					pageSize: 10
				}).then(res => {
					if (res.data.code == 200) {
						if (res.data.data.list.length != 0) {
							res.data.data.list.forEach(function(item, index) {
								// 过滤掉没有提交的订单
								if (item.status != -1){
									that.orderList = res.data.data.list
									that.copyOrderList = res.data.data.list
								}
							})
							uni.hideLoading()
						}
					} else {
						uni.hideLoading()
						uni.showToast({
							title: '网络错误',
							icon: 'none'
						})
					}
				})
			},
			// 切换上面的导航栏时
			changeActive: function(e) {
				var that = this
				this.changeOrderList(e.detail.name)
			},
			// 切换导航栏之后数据改变
			changeOrderList: function(num) {
				var that = this
				let status = num
				this.orderList = []
				switch (num) {
					case 0:
						that.orderList = that.copyOrderList;
						break;
					case 1:
						status = 0;
						break;
					case 2:
						status = 1;
						break;
					case 3:
						status = 2;
						break;
					case 4:
						status = 3;
						break;
				}
				if (num != 0) {
					this.copyOrderList.forEach(function(item, index) {
						if (item.status == status) {
							that.orderList.push(item)
						}
					})
				}
			},
			// 跳转到订单详情页面
			turnDetail:function(orderId){
				uni.navigateTo({
					url: '/pagesA/pages/groceryStore/orderRecord/orderRecordDetail/orderRecordDetail?orderId=' + orderId
				})
			},
			// 暂无开放
			noOPen:function(){
				uni.showToast({
					title: '暂无开放',
					icon: 'none'
				})
			}
		},
		onLoad() {
			this.checkOrderRecord()
		}
	}
</script>

<style>
	.stepper-box {
		width: 30%;
		position: relative;
		border-bottom: 1px solid #FFFFFF;
	}

	.stepper-price {
		position: absolute;
		right: 40rpx;
		color: red;
		top: 10rpx;
	}

	.stepper-count {
		position: absolute;
		top: 80rpx;
		right: 40rpx;
	}

	.bottom-box {
		width: 90%;
		height: 100%;
		margin: 0 auto;
		text-align: right;
		display: flex;
		align-items: flex-end;
	}

	.bottom-text {
		width: 100%;
		height: 70rpx;
		line-height: 70rpx;
		font-size: 15px;
	}

	.bottom-button-box {
		width: 70%;
		height: 100rpx;
	}

	.bottom-button-box button {
		width: 45%;
		height: 70rpx;
		background: #FFFFFF;
		border: 1px solid #E2E2E2;
		border-radius: 5px;
		font-size: 14px;
	}
</style>
